{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Ciallo～(∠・ω・ )⌒☆二次元论坛</title>
 <style>
     body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
     .navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: rgb(231, 130, 206); }
     .navbar li { float: left; }
     .navbar li a {
         display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;
     }
     .navbar {
        font-family: YouYuan;
        font-weight: 1000;
        display: flex; /* 使用Flexbox */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        position: relative; /* 相对定位以便于绝对定位logo */
    }
    /* 移除原有的浮动 */
    .navbar li {
        float: none; /* 不再使用float */
        position: relative; /* 相对定位 */
        padding: 0 10px; /* 与相邻元素保持间距 */
    }
    /* 更新链接样式 */
    .navbar li a {
        position: relative; /* 相对定位以便于伪元素定位 */
        padding: 10px; /* 调整内边距 */
    }

    /* 添加竖线样式 */
    .navbar li a:before {
        content: ''; /* 伪元素需要content属性 */
        position: absolute; /* 绝对定位 */
        left: -2px; /* 根据需要调整位置 */
        top: 50%; /* 垂直居中 */
        height: 20px; /* 高度 */
        border-left: 1px solid white; /* 竖线 */
        transform: translateY(-50%); /* 垂直居中 */
    }

     .navbar li span {
        content: ''; /* 伪元素需要content属性 */
        position: absolute; /* 绝对定位 */
        right: -50px; /* 根据需要调整位置 */
        top: 35px;
        height: 20px; /* 高度 */
        transform: translateY(-50%); /* 垂直居中 */
    }

    /* 移除第一个导航项前面的竖线 */
    .navbar li:first-child a:before {
        display: none;
    }
    .content { display: none; padding: 16px; }
    .active { display: block; }

     .logo {
        font-size: 20px; /* 设置文字大小 */
        font-weight: bold; /* 文字加粗 */
        font-family: YouYuan;
        color: white; /* 文字颜色 */
        text-decoration: none; /* 去除下划线 */
        padding: 14px 16px; /* 保持与导航链接相同的内边距 */

    }

    /* 确保logo在左侧对齐 */
    .navbar li.logo {
        float: left; /* 或者使用flex-start */
    }
    .user-avatar {
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
            border-radius: 50%;
            width: 40px;  /* 设置头像宽度 */
            height: 40px; /* 设置头像高度 */
        }
        .user-name {
            display: inline-block;
            vertical-align: middle;
            font-weight: bold;
            color: white;
            margin-right: 10px;
        }
</style>
<style>
.floating-ball {
    width: 50px;
    height: 50px;
    background-color: rgb(156, 132, 132);
    border-radius: 50%;
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1000;
}

.floating-window {
    position: fixed;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    border: 1px solid #ccc;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1001;
    display: none;
}

.floating-window p {
    margin: 0;
}
</style>
{% block css %}{% endblock %}
</head>
<body>
    <ul class="navbar">
        <li><a href="/index/" class="logo">～(∠・ω・ )⌒☆ 二次元论坛</a></li>
        <li><a href="/index/" class="active" id="home-link">首页</a></li>
        <li><a href="/article/" id="hotsearch-link">文章</a></li>
        <li><a href="/tiezi/show/" id="artstyle-link">社区</a></li>
        <li><a href="/game/0/show" id="games-link">游戏</a></li>
        <li><a href="/novel/" id="lightnovel-link">轻小说</a></li>
        <li><a href="/merch/0/show" id="periphery-link">周边</a></li>
        <li><a href="/login/" id="login.html">登录</a></li>
        <li style="position: relative; padding: 10px 10px;">
            <a href="/me/"><img src="{% static '/picture/tou.jpg' %}" alt="User Avatar" class="user-avatar"></a>
            <span class="user-name">{{ coo.name }}</span>
        </li>
    </ul>
<div id="floatingBall" class="floating-ball" onclick="toggleFloatingWindow()"></div>
<div id="floatingWindow" class="floating-window" style="display:none;">
        <form id="formaiAdd" method="post" novalidate>
        <div class="input-container">
            <!-- 输入框 -->
            <input name="major" type="text" id="messageaiInput" placeholder="输入消息或使用语音输入" value="{{major}}">
            <!-- 语音输入按钮 -->
            <span class="voice-btn" id="voiceInputBtn">&#127897;️</span>
        </div>
        <!-- 输出框 -->
        <div class="output-container" id="messageaiOutput"></div>
        <!-- 星火返回的答案-->
        <!-- 发送按钮 -->
        <button class="send-btn" id="sendaiBtn" , type="button">发送</button>
    </form>
    <button onclick="closeFloatingWindow()">关闭</button>
</div>
<div>
    {% block content %}{% endblock %}
</div>
</body>
</html>
<script>
    function toggleFloatingWindow() {
    var floatingWindow = document.getElementById("floatingWindow");
    if (floatingWindow.style.display === "none") {
        floatingWindow.style.display = "block";
    } else {
        floatingWindow.style.display = "none";
    }
}

function closeFloatingWindow() {
    var floatingWindow = document.getElementById("floatingWindow");
    floatingWindow.style.display = "none";
}
</script>


<!-- 语音识别功能的JavaScript代码 -->
<script>
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = true;

    // 初始化语音识别
    function initVoiceRecognition() {
        recognition.lang = 'zh-CN';
        recognition.start();
    }

    // 语音识别结果处理
    recognition.onresult = function (event) {
        var interimTranscript = '';
        for (var i = event.resultIndex; i < event.results.length; ++i) {
            if (event.results[i].isFinal) {
                document.getElementById('messageInput').value = event.results[i][0].transcript;
            } else {
                interimTranscript += event.results[i][0].transcript;
            }
        }
    };

    // 语音输入按钮点击事件开启麦克风
    document.getElementById('voiceInputBtn').addEventListener('click', function () {
        if (recognition) {
            initVoiceRecognition();
        }
    });
</script>
    <script src="{% static '/js/jquery-3.6.0.min.js' %}"></script>
    <script type="text/javascript">

    $(function () {
        bindBtnaiEvent();
    })

    function bindBtnaiEvent() {
        $("#sendaiBtn").click(function () {
            $("#messageaiOutput").text("");
            $.ajax({
                url: "/ai/",  //    => /order/delete/?uid=123
                type: "post",
                data: $("#formaiAdd").serialize(),
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        $("#messageaiOutput").text(res.data);
                    } else {
                        // 删除失败
                        alert(res.error);
                    }
                }
            })
        });
    }
</script>
{% block js %}{% endblock %}
